<template>
  <section class="wrapper">
    <v-head></v-head>
    <div class="main">
      <v-sidebar @myClick="sidebarFn"></v-sidebar>
      <div class="content-box" :class="{'content-collapse':collapse}">
        
        <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in levelList" :key="index"> {{item.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <v-tags @myClick="tagFn"></v-tags>
        
        <div class="content">
          <transition name="move" mode="out-in">
            
            <keep-alive :include="tagsList">
              <router-view></router-view>
            </keep-alive>
          </transition>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import vHead from "./Header.vue";
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
export default {
  components: {
    vHead,
    vSidebar,
    vTags
  },
  data() {
    return {
      tagsList: [],
      levelList: [],
      collapse: false
    }
  },
  created() {
    bus.$on('collapse', msg => {
      this.collapse = msg;
    })
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      let arr = [];
      for(let i = 0, len = msg.length; i < len; i ++){
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    })
  },
  methods: {
    tagFn(obj) {
      
      this.levelList = obj.list;
    },
    sidebarFn(arr) {
      this.levelList = arr;
    },
  },
  watch: {
    $route(to, from) {
      // console.log(222, to, from)
      // this.getBreadcrumb();
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  flex: 1;
  // min-width: 960px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    .nav {
      padding-left: 20px;
      background: white;
      height: 40px;
      display: flex;
      align-items: center;
    }
    .content-box {
      flex: 1;
      height: 100%;
      overflow: hidden;
      // overflow-y: auto;
      // padding: 10px;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        height: 100%;
      }
    }
  }
}
</style>



